<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="我的证件"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false">
			<free-divider></free-divider>

			<view class="pl-2 pr-2 py-3">
				<view class="dfex border-bottom mt-2 pb-3" v-for="(item,index) in papersList" :key="index">
					<view class="font-14">{{ item.papersName }}</view>
					<img class="pl-5" style="width: 144px; height: 88px;" :src="getFullPicUrl(item.papersPhotoUrl)"
						 @click="previewImage(item)" />
					<view class="dfex text-8ED0F2 pl-2 mt-14 font-14" style="width: 100px;">
						<view @click="previewImage">下载</view>
						<view @click="del(item.id)">删除</view>
					</view>
				</view>

			</view>

			<ferrButton title="添加新增件" @click="showAddBox"></ferrButton>
			<!-- 修改名字|修改微信号 弹框-->
			<free-confirm ref="confirm" :title="confirmTitle">
				<u-field v-model="currentPapersName" label="证件名称" placeholder="请输入证件名称">
				</u-field>
				<view class="flex-y py-3 pl-2 pr-2">
					<view class="">
						证件上传
					</view>
					<u-upload ref="uUpload" :max-size="4 * 1024 * 1024" :form-data="{'biz':'temp'}" :header="header"
						@on-success="uploadSuccess" :action="getUploadUrl()" max-count="1"></u-upload>
				</view>
				  <view class="font-12 text-999999 pl-1">图片大小限制不能超过4MB</view>
				<!-- 5 * 1024 * 1024 的计算结果为 5242880，单位是字节（Byte）。
				而 1MB 等于 1024KB，1KB 等于 1024B，所以 5MB 等于 5 * 1024 * 1024 = 5242880B。-->
			</free-confirm>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeAvater from "@/components/free-ui/free-avater.vue";
	import freeDivider from "@/components/free-ui/free-divider.vue";
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $U from "@/common/free-lib/util.js";
    import {
    	getImageUrl
    } from '@/common/free-lib/util.js';
	export default {
		components: {
			freeAvater,
			freeDivider,
			freeConfirm,
			ferrButton
		},
		data() {
			return {

				confirmType: "",
				currentPapersName: '',
				// 演示地址，请勿直接使用
				fileList: [],
				papersList: [],
				header: $H.getTokenHeader()
			}
		},
		computed: {
			confirmTitle() {
				return this.confirmType == 'username' ? '添加新证件' : '添加新证件'
			},
		},
		onLoad(options) {
			this.getPapers();
		},
		methods: {
			getFullPicUrl(url) {
				return $H.getFullImageUrl(url);
			},
			getUploadUrl(url) {
				return $H.getFullUrl('sys/common/upload');
			},
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			previewImage(item) {
				uni.previewImage({
					urls: this.papersList.map(img => this.getFullImageUrl(img.papersPhotoUrl)), // 所有图片的 URL 数组
					current: this.getFullImageUrl(item.papersPhotoUrl), // 当前点击的图片 URL
					success: function() {
						uni.showToast({
							title: '长按图片可保存',
							icon: 'none',
							duration: 5000 // 2秒钟的显示时间
						});
					}
				});
			},
			showAddBox() {
				const userId = $U.getStorage("id");

				if (!userId) {
					uni.showToast({
						title: "请重新登录",
						icon: "error",
					});
				}
				this.$refs.confirm.show((close) => {
					let files = [];
					// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
					files = this.$refs.uUpload.lists.filter(val => {
						return val.progress == 100;
					})
					// 如果您不需要进行太多的处理，直接如下即可
					// files = this.$refs.uUpload.lists;
					if (files.length == 0) {
						uni.showToast({
							title: '请上传文件',
							icon: 'none'
						});
						return;
					}
					if (!this.currentPapersName) {
						uni.showToast({
							title: '请输入证件名称',
							icon: 'none'
						});
						return;
					}
					$H.post('/basisInform/papersManage/upper/add', {
						papersManageItemList: [{
							papersName: this.currentPapersName,
							papersPhotoUrl: files[0].response.message
						}, ],
						userId: userId

					}, {}).then(res => {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
						this.currentPapersName = '';
						this.getPapers();
						close();
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
					close();
				});
			},
			getPapers() {
				uni.showLoading({
					title: '加载中'
				});
				$H.post('/basisInform/papersManage/upper/List').then(res => {
					uni.hideLoading();
					this.papersList = res.result;
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
			},
			uploadSuccess(data, index, lists, name) {
				if (data.success) {
					uni.showToast({
						title: '图片上传成功',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: data.message || '图片上传失败',
						icon: 'none'
					});
				}
			},
			download(url) {
				$H.downloadPic(url);
			},
			del(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该证件吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中'
							});
							$H.post('/basisInform/papersManage/upper/delete?id=' + id).then(res => {
								uni.hideLoading();
								if (res.success) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									this.getPapers();
								} else {
									uni.showToast({
										title: res.message || '删除失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
						}
					}
				});
			}


		}
	}
</script>

<style>
</style>